<?php $data = SildeShowService::getInstance()->getData('index')?>
			<div class='slider-wrapper'>
    			<div class='slider-show'>
    				<div class='slider-image-wrapper'>
    					<div class='slider-image-mask'>
    						<?php $i=0;foreach($data as $one):?>
    						<?php if($i>3) break;?>
	    					<a href='<?php echo $one['link']?>' target='<?php echo $one['target']?>'><img src='<?php echo $one['src']?>' class='slider-image'></a>
	    					<?php ++$i;endforeach;?>
    					</div>
    				</div>
    				<div class='slider-image-title-wrapper'>
    					<p class='slider-image-title'>
    						<?php echo $one['title']?>
    					</p>
    				</div>
    			</div>
    			<div class='slider-item-wrapper'>
    				<ul class='slider-items'>
    					<?php $i=0;foreach($data as $index=>$one):?>
    					<?php if($i>3) break;?>
    					<li class='slider-item<?php if($i==3) echo ' last'?>' index=<?php echo $index?>>
    						<div class='slider-item-thumb-wrapper'>
    							<a href='javascript:void(0)'><img src='<?php echo $one['thumb']?>' class='slider-item-thumb'/></a>
    						</div>
    						<div class='slider-item-desc-wrapper'>
    							<p class='slider-item-title'>
    								<a target='<?php echo $one['target']?>' href='<?php echo $one['link']?>'><?php echo $one['title']?></a>
    							</p>
    							<p class='slider-item-desc'>
    								<?php echo $one['desc']?>
    							</p>
    						</div>
    						<div class='slider-item-hover-arrow'></div>
    					</li>
    					<?php ++$i;endforeach;?>
    				</ul>
    			</div>
    		</div>
    		<script type="text/javascript">
    			
    			$().ready(function() {
        			var currentIndex = 0;
        			var maxIndex = 0;
        			var playIndex = null;
        			var $currentImage = null;
    				$('.slider-wrapper .slider-item').mouseover(function() {
    					setHover($(this).attr('index'));
            		});
					$('.slider-wrapper .slider-image').hide();
					$items = $('.slider-wrapper .slider-item');
					maxIndex = $items.length;
					tid = null;
					setHover(0);
					play();
					function play() {
						if(tid) return true;
						tid = setInterval(function() {
							setHover(currentIndex);
							++currentIndex;
							if(currentIndex==maxIndex) currentIndex = 0;
						}, 3000);
					}
					function pause() {
						clearInterval(tid);
						tid = null;
					}

					$('.slider-wrapper').mouseover(function() {
						pause();
					}).mouseout(function() {
						play();
					});
					
					function setHover(index) {
						$ele = $($items[index]);
        				index = $ele.attr('index');
        				$items.removeClass('current');
        				$ele.addClass('current');
        				if(playIndex == index) return true;
						$images = $('.slider-wrapper .slider-image');
						zIndex = 999;
						$image = $($images[index]);
						
						if($currentImage) {
							if($currentImage.is(':animated')) {
								$currentImage.css({'z-index': 1000}).stop(true, true);
							} else {
								$currentImage.css({'z-index': 1000}).fadeOut();
							}
						}
						if($image && $image.is(':animated'))
							$image.stop(true, true).fadeIn(1);
						else
							$image.css({'z-index': 999}).show();
						$currentImage = $image;
        				currentIndex = playIndex = index;
        				indexStr = (parseInt(currentIndex)+1)+'/'+parseInt(maxIndex);
        				$('.slider-wrapper .slider-image-title').html(indexStr+'&nbsp;&nbsp;'+$ele.find('.slider-item-desc').html());
					}
        		});
    			
    		</script>